<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图动画案例</title>
    <style>
        body {
            background-color: #222;
        }
        @keyframes pulse {
            0% {
                width: 5px;
                height: 5px;
            }
            70% {
                /* 不用scale, 因为阴影会同时被放大 */
                /* transform: scale(8, 8); */
                width: 30px;
                height: 30px;
                opacity: 1;
            }
            100% {
                width: 50px;
                height: 50px;
                opacity: 0;
            }
        }
        .map {
            position: relative;
            width: 747px;
            height: 617px;
            background: url(../images/png/map.png);
            margin: 0 auto;
        }
        .city {
            position: absolute;
            top: 232px;
            left: 554px;
            /* border: 1px solid seagreen; */
        }
        .tb {
            top: 490px;
            left: 665px;
        }
        .gd {
            top: 533px;
            left: 557px;
        }
        .dotted {
            width: 5px;
            height: 5px;
            background-color: #009dfd;
            border-radius: 50%;
            opacity: 0.9;
        }
        div[class^="pulse"] {
            /* 下面四行 非常重要！ 保证波纹从中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            box-shadow: 0 0 10px #009dfd;
            border-radius: 50%;
            animation: pulse 1s linear infinite;
        }
        div.pulse1 {
            animation-delay: 0s;
        }
        div.pulse2 {
            animation-delay: .4s;
        }
        div.pulse3 {
            animation-delay: .8s;
        }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city gd">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>
</html>